<template>
 <div style="overflow: auto;position: inherit">
    <div class="electricity_div" v-loading="load" element-loading-text="loading">
      <img class="pos_mgu" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_mgu" :subtitle="subtitle" :energy_value="mgu_value" :title="mgu_title" :units="units"/>

      <img class="pos_plat" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_plat" :subtitle="subtitle" :energy_value="plat_value" :title="plat_title" :units="units"/>

      <img class="pos_life" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_life" :subtitle="subtitle" :energy_value="life_value" :title="life_title" :units="units"/>

      <img class="pos_total" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_total" :subtitle="subtitle" :energy_value="total_value" :title="total_title"
                  :units="units"/>
    </div>
  </div>
</template>

<script>
import EnergyGrid from '../../components/EnergyGrid'
import { findTodayTotal } from '../../api/tenergy'
export default {
  components: { EnergyGrid },
  name: 'water',
  data () {
    return {
      load: true,
      subtitle: 'Day Water Consumption:',
      units: 't',
      mgu_title: 'MGU Water',
      plat_title: 'Plating Water',
      life_title: 'Water For Life',
      total_title: 'Total Water Consumption',

      mgu_value: 0,
      plat_value: 0,
      life_value: 0,
      total_value: 0
    }
  },
  mounted () {
    this.requestTodayTotal()
  },
  methods: {
    async requestTodayTotal () {
      try {
        const res = await findTodayTotal()
        console.log(res)
        let data = res.data
        for (let i in data) {
          switch (data[i].deviceName) {
            case 'MGU Water':
              this.mgu_value = data[i].todayValue
              break
            case 'Plating Water':
              this.plat_value = data[i].todayValue
              break
            case 'Water For Life':
              this.life_value = data[i].todayValue
              break
            case 'Total Water':
              this.total_value = data[i].todayValue
              break
          }
        }
        this.load = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less">
.electricity_div {
    width: 1800px;
    height: 900px;
    background-repeat: no-repeat;
    background-image: url("../../assets/bg_pic.jpg");
    background-size: 100% auto;
    position: relative;
  }

  .pos_mgu {
    position: absolute;
    left: 830px;
    top: 230px;
  }

  .grid_mgu {
    position: absolute;
    left: 700px;
    top: 170px;
  }

  .pos_plat {
    position: absolute;
    left: 920px;
    top: 300px;
  }

  .grid_plat {
    position: absolute;
    left: 600px;
    top: 300px;
  }

  .pos_life {
    position: absolute;
    left: 1090px;
    top: 560px;
  }

  .grid_life {
    position: absolute;
    left: 910px;
    top: 500px;
  }

  .pos_total {
    position: absolute;
    left: 1300px;
    top: 630px;
  }

  .grid_total {
    position: absolute;
    left: 990px;
    top: 630px;
  }
</style>
